<template>
  <el-card>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="main" style="width: 100%;height:500px;"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },

  mounted() {},

  methods: {
    showEcherts() {
      var myChart = echarts.init(this.$refs.main)
      var option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['订单', '销售额']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.option.xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单',
            type: 'line',
            stack: '订单',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.option.orderData
          },
          {
            name: '销售额',
            type: 'line',
            stack: '销售额',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.option.amountData
          }
        ]
      }
      myChart.setOption(option)

      setTimeout(function() {
        window.onresize = function() {
          myChart.resize()
        }
      }, 200)
    }
  },
  watch: {
    option: {
      handler() {
        this.showEcherts()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 10px;
}
</style>
